[アップデート] AWS Amplify AI kitが公開！ AI 機能を備えた Web アプリを迅速に構築できるようになりました

import { type ClientSchema, a, defineData } from "@aws-amplify/backend";

const schema = a.schema({
  chat: a
    .conversation({
      aiModel: a.ai.model("Claude 3 Haiku"),
      systemPrompt: "あなたは優秀なアシスタントです。",
    })
    .authorization((allow) => allow.owner()),
});

export type Schema = ClientSchema<typeof schema>;

npm create amplify@latest

npx ampx sandbox

Both the legacy 'AWS_DEFAULT_REGION' and preferred 'AWS_REGION' environment variables detected. Using 'AWS_REGION'

  Amplify Sandbox

  Identifier:   nakano.yoshiyuki
  Stack:        amplify-amplifytest-nakanoyoshiyuki-sandbox--*******:

  To specify a different sandbox identifier, use --identifier


✨  Synthesis time: 0.02s

⚠️ The --hotswap and --hotswap-fallback flags deliberately introduce CloudFormation drift to speed up deployments
⚠️ They should only be used for development - never use them for your production Stacks!

amplify-amplifytest-nakanoyoshiyuki-sandbox-*******: start: Building

--- 省略 ---

Stack ARN:
arn:aws:cloudformation:ap-northeast-1:-*******::stack/amplify-amplifytest-nakanoyoshiyuki-sandbox-*******/01d089a0-*******-*******-*******-******

✨  Total time: 201.37s

[Sandbox] Watching for file changes...
File written: amplify_outputs.json

import { type ClientSchema, a, defineData } from "@aws-amplify/backend";

const schema = a.schema({
  chat: a
    .conversation({
      aiModel: a.ai.model("Claude 3 Haiku"),
      systemPrompt: "あなたは優秀なアシスタントです。",
    })
    .authorization((allow) => allow.owner()),
});

export type Schema = ClientSchema<typeof schema>;

export const data = defineData({
  schema,
  authorizationModes: {
    defaultAuthorizationMode: "iam",
  },
});

npm create vite@latest chat-app -- --template react-ts

Scaffolding project in /Users/nakano.yoshiyuki/Work/amplify-test/chat-app...

Done. Now run:

  cd chat-app
  npm install
  npm run dev

{
  "name": "amplify-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "workspaces":[
    "chat-app"
  ],
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@aws-amplify/backend": "^1.8.0",
    "@aws-amplify/backend-cli": "^1.4.2",
    "aws-cdk": "^2.167.2",
    "aws-cdk-lib": "^2.167.2",
    "constructs": "^10.4.2",
    "esbuild": "^0.24.0",
    "tsx": "^4.19.2",
    "typescript": "^5.6.3"
  },
  "dependencies": {
    "@aws-amplify/ui-react": "^6.6.0",
    "@aws-amplify/ui-react-ai": "^1.0.0",
    "aws-amplify": "^6.8.2"
  }
}

npm add aws-amplify @aws-amplify/ui-react @aws-amplify/ui-react-ai

added 59 packages, and audited 1512 packages in 11s

136 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

import React, { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { Amplify } from "aws-amplify";
import "@aws-amplify/ui-react/styles.css";
import outputs from "../../amplify_outputs.json";
import { Authenticator } from "@aws-amplify/ui-react";
import { App } from "./App";

Amplify.configure(outputs);

const rootElement = document.getElementById("root");
if (rootElement) {
  createRoot(rootElement).render(
    <StrictMode>
      <Authenticator>
        <App />
      </Authenticator>
    </StrictMode>
  );
}

import React from "react";
import { AIConversation } from "@aws-amplify/ui-react-ai";
import { useAIConversation } from "./client";

export const App = () => {
  const [
    {
      data: { messages },
      isLoading,
    },
    handleSendMessage,
  ] = useAIConversation("chat");

  return (
    <AIConversation
      messages={messages}
      isLoading={isLoading}
      handleSendMessage={handleSendMessage}
    />
  );
};

npm run dev -w chat-app

  VITE v5.4.11  ready in 468 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

import { a, defineData, type ClientSchema } from "@aws-amplify/backend";

const schema = a.schema({
  // This will add a new conversation route to your Amplify Data backend.
  chat: a
    .conversation({
      aiModel: a.ai.model("Claude 3 Haiku"),
      systemPrompt: "You are a helpful assistant",
    })
    .authorization((allow) => allow.owner()),

  // This adds a new generation route to your Amplify Data backend.
  generateRecipe: a
    .generation({
      aiModel: a.ai.model("Claude 3 Haiku"),
      systemPrompt: "You are a helpful assistant that generates recipes.",
    })
    .arguments({
      description: a.string(),
    })
    .returns(
      a.customType({
        name: a.string(),
        ingredients: a.string().array(),
        instructions: a.string(),
      })
    )
    .authorization((allow) => allow.authenticated()),
});

export type Schema = ClientSchema<typeof schema>;

export const data = defineData({
  schema,
  authorizationModes: {
    defaultAuthorizationMode: "userPool",
  },
});